<template>
  <div>
    <div class="video-container">
      <!-- <el-tag>视频预览采用直播推流技术，结束后无法重复观看</el-tag> -->
      <!-- <div style="margin-top: 8px" ref="mse" id="mse"></div> -->

      <video controls autoplay>
        <source :src="deviceObj.url" type="video/mp4"  />
        您的浏览器不支持 Video 标签。
      </video>
    </div>
  </div>
</template>

<script>
// import xgplayer from 'xgplayer';
// import FlvJsPlayer from 'xgplayer-flv.js';

export default {
  props: {
    deviceObj: Object,
    selectOption: Array,
  },
  data() {
    return {
      videoPlayer: '',
      currentDeviceId: '',
    };
  },
  watch: {
    currentDeviceId() {
      // this.videoPlayer.destroy(true);
      // this.getVideo();
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.currentDeviceId = this.deviceObj.url;
    // this.getVideo();
  },
  methods: {
    getVideo() {
      this.videoPlayer = new window.Player({
        el: this.$refs.mse,
        url: this.deviceObj.url,
        poster: '',
        plugins: [window.FlvPlayer],
        isLive: true,
        autoplay: true,
        seekedStatus: 'auto',
        replay: false, // 禁用重播功能
      });
    },
  },
  components: {},
  destroyed() {
    // this.videoPlayer.destroy(true);
  },
};
</script>

<style scoped lang="scss">
.video-container {
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  background-color: #000;
}
.video-img {
  width: 100%;
  height: 100%;
}
.video-box {
  height: 500px;
}
.left-text {
  font-size: 16px;
}
::v-deep .el-input__inner {
  background-color: #2a314a;
  border: 1px solid #29304d;
  color: #fff;
}
</style>
